<template>
  <div class="useraccount-container nav-bar-top">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="我的钱包" left-arrow @click-left="$router.back()"/>
    <div class="account-info circle-bg">
      <div class="num-box">
        <span class="tip">可用余额</span>
        <div class="num">
          <span class="balance">¥{{user ? user.balance : 0 | fentoyuan}}</span>
          <van-button class="btn">充值</van-button>
        </div>
      </div>
    </div>
    <div class="circle-bg">
      <van-cell title="钱包明细" is-link icon="gold-coin-o" @click="$router.push('/userAccountDetail')"/>
      <van-cell title="绑定银行卡" is-link icon="peer-pay" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'userAccount',
  data () {
    return {

    }
  },
  computed: {
    ...mapState(['user', 'userAttachInfo'])
  }
}
</script>

<style lang="scss">
.useraccount-container{
  padding-top: 5px;
  .van-cell{
    padding: 15px 0px;
  }
  .account-info{
    height: 150px;
    padding: 0px 20px;
    padding-top: 30px;
    background: linear-gradient(125deg,#efc480,#f8dca5);
    .num-box{
      height: 80px;
      // background: url() no-repeat;
      background-size: cover;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      padding: 20px 20px;
      .tip{
        // color: #e6b873;
        color: #fff;
        font-size: 15px;
        margin-bottom: 30px;
      }
      .num{
        display: flex;
        justify-content: space-between;
        .balance{
          // color: #e6b873;
          color: #fff;
          font-size: 28px;
        }
        .btn{
          height: 35px;
          padding: 15px 25px;
        }
      }
    }
  }
}
</style>
